<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar title="我的订单" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<text class="slot" slot="right" @tap="showPopup = true">客服</text>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title="我的订单" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground">
			<view class="slot"><text @tap="showPopup = true">客服</text></view>
		</u-navbar>
		<!-- #endif -->
		<view class="main">
			<view class="tabs">
				<u-sticky :enable="enable"><u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper></u-sticky>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" @change="change" :style="{ height: swiperHeight + 'px' }">
				<!-- 全部 -->
				<swiper-item>
					<view class="swiper-item swiper-item-0">
						<view v-if="orderList.length > 0">
							<view class="item" v-for="(item, index) in orderList" :key="index">
								<view class="item-state">
									<text v-if="item.status !== 1">{{ '订单号：' + item.order_sn }}</text>
									<view class="else" v-else>
										<uni-icons size="20" color="#333" type="shop"></uni-icons>
										<text>{{ item.goods[0].store_name }}</text>
										<uni-icons size="15" color="#999" type="arrowright"></uni-icons>
									</view>
									<text class="state" v-show="item.status == 1">等待付款</text>
									<text class="state" v-show="item.status == 2">等待核销</text>
									<text class="state" v-show="item.status == 3">核销中</text>
									<text class="state" v-show="item.status == 4">等待评价</text>
									<text class="state" v-show="item.status == 5">交易成功</text>
								</view>
								<view class="item-info" v-for="(it, ind) in item.goods" :key="ind" @click="handleDetail(item.id)">
									<u-image width="35vw" height="180" border-radius="10" :src="it.cover"></u-image>
									<view class="item-right">
										<text class="name">{{ it.title }}</text>
										<text class="zk">{{ '到店抵消：' + it.deduction_price }}</text>
										<view class="price">
											<view class="left">
												<text>定金￥</text>
												<text class="left-price">{{ it.deposit_price }}</text>
											</view>
											<text>{{ 'x' + it.num }}</text>
										</view>
									</view>
								</view>
								<view class="item-sub">
									<text>{{ '共' + item.order_goods_total + '件商品 定金合计：￥' + item.total_price }}</text>
								</view>
								<view class="item-btn">
									<u-button size="mini" :custom-style="bntStyle" :ripple="true" ripple-bg-color="#f1f1f1" v-show="item.status == 1" @click="handleCancel(item.id)">
										取消订单
									</u-button>
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" v-show="item.status == 1" @click="handleDetail(item.id)">去付款</u-button>
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" v-show="item.status == 2" @click="handleWriteOff(item.id)">
										立即核销
									</u-button>
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" v-show="item.status == 4" @click="handleToReviews(item.id)">
										立即评价
									</u-button>
								</view>
							</view>
						</view>
						<view class="empty" v-else><text>您还没有相关的订单</text></view>
					</view>
				</swiper-item>
				<!-- 未付款 -->
				<swiper-item>
					<view class="swiper-item swiper-item-1">
						<view v-if="orderList.length > 0">
							<view class="item" v-for="(item, index) in orderList" :key="index">
								<view class="item-state">
									<text v-if="item.status !== 1">{{ '订单号：' + item.order_sn }}</text>
									<view class="else" v-else>
										<uni-icons size="20" color="#333" type="shop"></uni-icons>
										<text>{{ item.goods[0].store_name }}</text>
										<uni-icons size="15" color="#999" type="arrowright"></uni-icons>
									</view>
									<text class="state" v-show="item.status == 1">等待付款</text>
								</view>
								<view class="item-info" v-for="(it, ind) in item.goods" :key="ind" @click="handleDetail(item.id)">
									<u-image width="35vw" height="180" border-radius="10" :src="it.cover"></u-image>
									<view class="item-right">
										<text class="name">{{ it.title }}</text>
										<text class="zk">{{ '到店抵消：' + it.deduction_price }}</text>
										<view class="price">
											<view class="left">
												<text>定金￥</text>
												<text class="left-price">{{ it.deposit_price }}</text>
											</view>
											<text>{{ 'x' + it.num }}</text>
										</view>
									</view>
								</view>
								<view class="item-sub">
									<text>{{ '共' + item.order_goods_total + '件商品 定金合计：￥' + item.total_price }}</text>
								</view>
								<view class="item-btn">
									<u-button size="mini" :custom-style="bntStyle" :ripple="true" ripple-bg-color="#f1f1f1" v-show="item.status == 1" @click="handleCancel(item.id)">
										取消订单
									</u-button>
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#8EB7FA" v-show="item.status == 1" @click="handleDetail(item.id)">去付款</u-button>
								</view>
							</view>
						</view>
						<view class="empty" v-else><text>您还没有相关的订单</text></view>
					</view>
				</swiper-item>
				<!-- 待消费 -->
				<swiper-item>
					<view class="swiper-item swiper-item-2">
						<view v-if="orderList.length > 0">
							<view class="item" v-for="(item, index) in orderList" :key="index">
								<view class="item-state">
									<text v-if="item.status !== 1">{{ '订单号：' + item.order_sn }}</text>
									<view class="else" v-else>
										<uni-icons size="20" color="#333" type="shop"></uni-icons>
										<text>{{ item.goods[0].store_name }}</text>
										<uni-icons size="15" color="#999" type="arrowright"></uni-icons>
									</view>
									<text class="state" v-show="item.status == 2">等待核销</text>
									<text class="state" v-show="item.status == 3">核销中</text>
								</view>
								<view class="item-info" v-for="(it, ind) in item.goods" :key="ind" @click="handleDetail(item.id)">
									<u-image width="35vw" height="180" border-radius="10" :src="it.cover"></u-image>
									<view class="item-right">
										<text class="name">{{ it.title }}</text>
										<text class="zk">{{ '到店抵消：' + it.deduction_price }}</text>
										<view class="price">
											<view class="left">
												<text>定金￥</text>
												<text class="left-price">{{ it.deposit_price }}</text>
											</view>
											<text>{{ 'x' + it.num }}</text>
										</view>
									</view>
								</view>
								<view class="item-sub">
									<text>{{ '共' + item.order_goods_total + '件商品 定金合计：￥' + item.total_price }}</text>
								</view>
								<view class="item-btn">
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#f1f1f1" v-show="item.status == 2" @click="handleWriteOff(item.id)">
										立即核销
									</u-button>
								</view>
							</view>
						</view>
						<view class="empty" v-else><text>您还没有相关的订单</text></view>
					</view>
				</swiper-item>
				<!-- 待评价 -->
				<swiper-item>
					<view class="swiper-item swiper-item-3">
						<view v-if="orderList.length > 0">
							<view class="item" v-for="(item, index) in orderList" :key="index">
								<view class="item-state">
									<text v-if="item.status !== 1">{{ '订单号：' + item.order_sn }}</text>
									<view class="else" v-else>
										<uni-icons size="20" color="#333" type="shop"></uni-icons>
										<text>{{ item.goods[0].store_name }}</text>
										<uni-icons size="15" color="#999" type="arrowright"></uni-icons>
									</view>
									<text class="state" v-show="item.status == 4">等待评价</text>
								</view>
								<view class="item-info" v-for="(it, ind) in item.goods" :key="ind" @click="handleDetail(item.id)">
									<u-image width="35vw" height="180" border-radius="10" :src="it.cover"></u-image>
									<view class="item-right">
										<text class="name">{{ it.title }}</text>
										<text class="zk">{{ '到店抵消：' + it.deduction_price }}</text>
										<view class="price">
											<view class="left">
												<text>定金￥</text>
												<text class="left-price">{{ it.deposit_price }}</text>
											</view>
											<text>{{ 'x' + it.num }}</text>
										</view>
									</view>
								</view>
								<view class="item-sub">
									<text>{{ '共' + item.order_goods_total + '件商品 定金合计：￥' + item.total_price }}</text>
								</view>
								<view class="item-btn">
									<u-button size="mini" :custom-style="btnStyle" :ripple="true" ripple-bg-color="#f1f1f1" v-show="item.status == 4" @click="handleToReviews(item.id)">
										立即评价
									</u-button>
								</view>
							</view>
						</view>
						<view class="empty" v-else><text>您还没有相关的订单</text></view>
					</view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item>
					<view class="swiper-item swiper-item-4">
						<view v-if="orderList.length > 0">
							<view class="item" v-for="(item, index) in orderList" :key="index">
								<view class="item-state">
									<text v-if="item.status !== 1">{{ '订单号：' + item.order_sn }}</text>
									<view class="else" v-else>
										<uni-icons size="20" color="#333" type="shop"></uni-icons>
										<text>{{ item.goods[0].store_name }}</text>
										<uni-icons size="15" color="#999" type="arrowright"></uni-icons>
									</view>
									<text class="state" v-show="item.status == 5">交易成功</text>
								</view>
								<view class="item-info" v-for="(it, ind) in item.goods" :key="ind" @click="handleDetail(item.id)">
									<u-image width="35vw" height="180" border-radius="10" :src="it.cover"></u-image>
									<view class="item-right">
										<text class="name">{{ it.title }}</text>
										<text class="zk">{{ '到店抵消：' + it.deduction_price }}</text>
										<view class="price">
											<view class="left">
												<text>定金￥</text>
												<text class="left-price">{{ it.deposit_price }}</text>
											</view>
											<text>{{ 'x' + it.num }}</text>
										</view>
									</view>
								</view>
								<view class="item-sub">
									<text>{{ '共' + item.order_goods_total + '件商品 定金合计：￥' + item.total_price }}</text>
								</view>
							</view>
						</view>
						<view class="empty" v-else><text>您还没有相关的订单</text></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 客服弹窗 -->
		<u-popup v-model="showPopup" mode="center" border-radius="15">
			<view class="popup">
				<text class="popup-title">客服咨询</text>
				<text class="popup-mobile">{{ '咨询热线：' + customer.tel_number }}</text>
				<u-image width="220" height="220" :src="customer.kefu_qr"></u-image>
				<text class="popup-sub">长按试别二维码保存图片</text>
			</view>
		</u-popup>
		<!-- 取消订单 -->
		<u-popup v-model="showCancel" border-radius="10" mode="center">
			<view class="cancel">
				<text class="cancel-title">提示</text>
				<view class="cancel-content"><text>是否取消商品订单？</text></view>
				<view class="cancel-bottom">
					<text @tap="showCancel = false">取消</text>
					<text class="confirm" @click="hancleCancelOrder">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniIcons from '../../../components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			bntStyle: {
				padding: '35rpx 50rpx',
				backgroundColor: '#fff',
				color: '#333',
				marginRight: '15rpx'
			},
			btnStyle: {
				backgroundColor: '#3F71C5',
				color: '#f1f1f1',
				margin: 0,
				padding: '35rpx 50rpx'
			},
			tabList: [
				{
					name: '全部'
				},
				{
					name: '未付款'
				},
				{
					name: '待消费'
				},
				{
					name: '待评价'
				},
				{
					name: '已完成'
				}
			],
			showPopup: false,
			showCancel: false,
			enable: true,
			swiperHeight: 0,
			swiperCurrent: '',
			current: 0,
			orderList: [],
			id: '',
			customer: {}
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.swiperCurrent = option.current - 1;
		this.current = this.swiperCurrent;
		// 客服信息
		this.$baseRequest('/api/Common/customer').then(res => {
			this.customer = res.data;
		});
	},
	onShow() {
		this.enable = true;
		this.onPageInit();
	},
	onHide() {
		this.enable = false;
	},
	methods: {
		onPageInit(index) {
			this.$tkRequest('/api/Orders/getList', {
				status: index
			}).then(res => {
				this.orderList = res.data;
				switch (index) {
					case 0:
						this.$nextTick(() => {
							this.getSwiperHeight(`.swiper-item-0`);
						});
						break;
					case 1:
						this.$nextTick(() => {
							this.getSwiperHeight(`.swiper-item-1`);
						});
						break;
					case 2:
						this.$nextTick(() => {
							this.getSwiperHeight(`.swiper-item-2`);
						});
						break;
					case 4:
						this.$nextTick(() => {
							this.getSwiperHeight(`.swiper-item-3`);
						});
						break;
					case 5:
						this.$nextTick(() => {
							this.getSwiperHeight(`.swiper-item-4`);
						});
						break;
				}
			});
		},
		// 商品详情
		handleDetail(id) {
			uni.navigateTo({
				url: `./detail/detail?id=${id}`
			});
		},
		handleCancel(id) {
			this.showCancel = true;
			this.id = id;
		},
		// 取消订单
		hancleCancelOrder() {
			this.$tkRequest('/api/Orders/cancel', {
				id: this.id
			}).then(res => {
				this.showCancel = false;
				uni.showToast({
					title: res.msg
				});
				this.onPageInit(this.swiperCurrent);
			});
		},
		// 立即核销
		handleWriteOff(id) {
			this.$tkRequest('/api/Orders/receipt', {
				id: id
			}).then(res => {
				uni.showToast({
					title: res.msg
				});
				setTimeout(() => {
					uni.navigateTo({
						url: `./detail/detail?id=${id}`
					});
				}, 800);
			});
		},
		// 评价
		handleToReviews(id) {
			uni.navigateTo({
				url: `./reviews/reviews?id=${id}`
			});
		},
		getSwiperHeight(el) {
			let info = uni.createSelectorQuery().select(el);
			info
				.boundingClientRect(res => {
					this.contentHeight = res.height;
					this.swiperHeight = this.contentHeight;
				})
				.exec();
		},
		change(e) {
			this.swiperCurrent = e.detail.current;
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		}
	},
	watch: {
		swiperCurrent: function() {
			uni.showLoading({
				title: '加载中...'
			});
			switch (this.swiperCurrent) {
				case 0:
					this.onPageInit(0);
					break;
				case 1:
					this.onPageInit(1);
					break;
				case 2:
					this.onPageInit(2);
					break;
				case 3:
					this.onPageInit(4);
					break;
				case 4:
					this.onPageInit(5);
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	padding: 0 $uni-spacing-row-lg;
	color: #f1f1f1;
	font-size: 11pt;
	/* #ifdef APP-PLUS */
	font-size: 14pt;
	/* #endif */
}

.main {
	swiper {
		min-height: 80vh;
	}

	.swiper-item {
		padding-bottom: $uni-spacing-col-lg;

		.empty {
			padding: 20vh 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 12pt;
		}

		.item {
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			margin: $uni-spacing-col-lg 0;
			background-color: #fff;
			display: flex;
			flex-direction: column;

			.item-state {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: $uni-spacing-col-lg;
				border-bottom: 1rpx solid #eee;

				.else {
					display: flex;
					align-items: center;
					color: #333;

					text {
						padding: 0 2rpx;
					}
				}

				.state {
					color: #3f71c5;
				}
			}

			.item-info {
				padding-top: $uni-spacing-col-lg;
				display: flex;

				.item-right {
					flex: 1;
					padding-left: $uni-spacing-row-base;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					overflow: hidden;

					.name {
						font-size: 1rem;
					}

					.zk {
						font-size: 10pt;
						color: #999;
					}

					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 11pt;
						color: #999;

						.left {
							color: #edb23b;

							.left-price {
								font-size: 1.1rem;
							}
						}
					}
				}
			}

			.item-sub {
				border-top: 1rpx solid #eee;
				margin-top: $uni-spacing-col-lg;
				padding-top: $uni-spacing-col-lg;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				font-size: 11pt;
				color: #999;
			}

			.item-btn {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding-top: $uni-spacing-col-lg;
			}
		}
	}
}

.popup {
	width: 80vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	background-image: url();
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #f1f1f1;

	.popup-title {
		padding: $uni-spacing-col-lg 0;
		font-family: '微软雅黑';
		letter-spacing: 4rpx;
		font-size: 12pt;
	}

	.popup-mobile {
		padding-bottom: $uni-spacing-col-lg;
		font-size: 11pt;
	}

	.popup-sub {
		padding: $uni-spacing-col-lg;
	}
}

.cancel {
	width: 70vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;
	align-items: center;

	.cancel-title {
		font-size: 12pt;
	}

	.cancel-content {
		font-size: 1rem;
		padding: 40rpx 0;
	}

	.cancel-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: $uni-spacing-col-lg;
		font-size: 12pt;

		text {
			flex: 1;
			text-align: center;
		}

		.confirm {
			color: #3f6cb7;
		}
	}
}
</style>
